<template>
  <div class="shop-edit" style=" position: relative">
    <el-drawer title="新增项目券" :visible.sync="show_dialog" direction="rtl" size="60%"
      custom-class="demo-drawer" :wrapper-closable="false" ref="drawer" :before-close="handleClose">
      <div class="demo-drawer__content">
        <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="名称：" prop="pc_name">
            <el-input v-model="form.pc_name"></el-input>
          </el-form-item>
          <el-form-item label="项目分类：" prop="project_class_id">
            <el-select v-model="form.project_class_id" placeholder="请选择" @change="handleClassChange">
              <el-option v-for="item in group" :key="item.id" :label="item.project_class_name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="项目客户：" prop="customerId">
            <el-select v-model="form.customerId" placeholder="请选择">
              <el-option v-for="item in levelList" :key="item.customerId" :label="item.customerName"
                :value="item.customerId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="抵扣金额：" prop="pc_deduction_price">
            <el-input v-model="form.pc_deduction_price"></el-input>
          </el-form-item>
          <el-form-item label="结算金额：">
            <el-input v-model="form.pc_settle_accounts_price"></el-input>
          </el-form-item>
          <el-form-item label="使用条件：" prop="pc_use_condition">
            <el-input v-model="form.pc_use_condition"></el-input>
          </el-form-item>
          <el-form-item label="库存：" required class="el-form-item__kc">
            <el-form-item prop="pc_stocks" label-width="auto">
              <el-input v-model="form.pc_stocks" @input="val => handleInput(val, 'pc_stocks')"></el-input>
            </el-form-item>
            <el-form-item label="会员券起始编号：" required label-width="126px" class="el-form-item__sn"
              v-if="['37', '38'].includes(form.project_class_id)">
              <el-form-item prop="vip_starting_sn" label-width="0px">
                <el-input 
                  v-model="form.vip_starting_sn" 
                  :maxlength="8"
                  placeholder="必填"
                  @input="val => handleInput('toUpperCase', val, 'vip_starting_sn')">
                </el-input>
              </el-form-item>
              -
              <el-form-item prop="vip_ending_sn" label-width="0px">
                <el-input 
                  v-model="form.vip_ending_sn" 
                  placeholder="必填"
                  :maxlength="5" 
                  @input="val => handleInput('toNumber', val, 'vip_ending_sn')">
                </el-input>
              </el-form-item>
            </el-form-item>
          </el-form-item>
          <el-form-item label="生效时间：" prop="pc_effectivetime">
            <el-date-picker v-model="form.pc_effectivetime" type="date" value-format="yyyy-MM-dd" placeholder="选择生效日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="截止时间：" :prop="form.deadline_type == '1' ? 'pc_endtime' : 'end_day'">
            <!-- <el-date-picker v-model="form.pc_endtime" type="date" value-format="yyyy-MM-dd" placeholder="选择截止日期">
            </el-date-picker> -->
            <el-radio v-model="form.deadline_type" label="1">
                <span>到期时间  </span>
                <el-date-picker :disabled="form.deadline_type != 1" v-model="form.pc_endtime" type="date" value-format="yyyy-MM-dd" placeholder="选择截止日期">
                </el-date-picker>
            </el-radio>
             <el-radio v-model="form.deadline_type" label="2">
                <span>有效天数  </span>
                <el-input :disabled="form.deadline_type != 2" v-model="form.end_day"></el-input>
            </el-radio>
          </el-form-item>
          <el-form-item label="描述：" prop="pc_desc">
            <tinymce v-if="show_dialog" v-model="form.pc_desc" :height="300" width="95%" :uploadData="uploadData" />
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleSubmit" :loading="loading">
            {{ loading ? "提交中 ..." : "确 定" }}
          </el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import Tinymce from '@/components/Tinymce';
export default {
  data() {
    return {
      group: [],
      levelList: [],
      rules: {
        pc_deduction_price: {
          required: true,
          message: "请输入抵扣金额",
          trigger: "blur"
        },
        pc_stocks: {
          required: true,
          message: "请输入库存",
          trigger: "blur"
        },
        pc_effectivetime: {
          required: true,
          message: "请选择生效时间",
          trigger: ["blur", 'change']
        },
        pc_endtime: {
          required: true,
          message: "请选择截止时间",
          trigger: ["blur", 'change']
        },
        end_day: {
          required: true,
          message: "有效天数",
          trigger: ["blur", 'change']
        },
        pc_desc: {
          required: true,
          message: "请输入描述",
          trigger: "blur"
        },
        pc_name: {
          required: true,
          message: "请输入名称",
          trigger: "blur"
        },
        customerId: {
          required: true,
          message: "请选择店铺等级",
          trigger: "change"
        },
        pc_use_condition: {
          required: true,
          message: "请输入使用条件",
          trigger: "blur"
        },
        project_class_id: {
          required: true,
          message: "请选所属集团",
          trigger: "change"
        },
        vip_starting_sn: {
          required: true,
          message: "请填写",
          trigger: "change"
        },
        vip_ending_sn: {
          required: true,
          message: "请填写",
          trigger: "change"
        }
      },
      uploadData: {
        img_source: 'attach_editor'
      },
      loading: false,
      form: {
        project_class_id: "",
        pc_name: "",
        pc_use_condition: "",
        customerId: "",
        pc_deduction_price: "",
        pc_settle_accounts_price: "",
        pc_stocks: "",
        pc_effectivetime: "",
        pc_endtime: "",
        effective_day:"",
        effective_type: "1",
        deadline_type: "1",
        pc_desc: "",
        project_class_name: "",
        vip_starting_sn: "",
        vip_ending_sn: "",
        deadline_type: "1",
        end_day:""
      },
      formLabelWidth: '80px',
      timer: null,
      show_dialog: false,
      type: 'add',
    };
  },
  components: { Tinymce },
  created() {
    this.uploadData = {};
    this.getdata();
  },
  methods: {
    handleClassChange(val) {
      if (val == 37 || val == 38) {
        this.form.pc_endtime = '2023-12-31'
      }
    },
    getdata() {
      this.$http.post('/admin/platform_coupon/index.php?act=platform_coupon&op=get_class', {

      }).then(res => {
        if (res.code == 1) {
          this.group = res.data.class_list;
          this.levelList = res.data.customer_list;

        } else {

          // alert(res.msg)
        }
      })
    },
    handleInput(type = 'toNumber', val, key) {
      this.form[key] = type === 'toNumber' ? val.replace(/^[^\d]/g, '') : val.toUpperCase()
    },
    show_dialog_fn(data) {
      if (data) {
        this.item_data = data;
        this.type = 'edit'
      }
      this.show_dialog = true;
    },
    handleClose() {
      this.show_dialog = false
      this.loading = false
      this.$refs.ruleForm.resetFields()
    },
    handleSubmit() {
      if (this.loading) return
      this.$confirm('确定要提交表单吗？')
      .then(_ => {
        this.$refs.ruleForm.validate(valid => {
            if (valid) {
            // this.loading = true
            for (let i = 0; i < this.group.length; i++) {
              if (this.group[i].id == this.form.project_class_id) {
                this.form.project_class_name = this.group[i].project_class_name;
              }
                }
            this.$http.post(
              "/admin/platform_coupon/index.php?act=platform_coupon&op=add_coupon",
              this.form
            ).then(res => {
              if (res.code == 1) {
                this.$parent.getListData()
                this.handleClose()
              } else {
                throw res.msg
              }
            }).catch(error => {
              this.loading = false
              error && this.$message.error(`${error}`)
            })
          }
        })
      }).catch(_ => { });
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
.el-drawer.rtl {

  overflow: auto;
}

.shop-edit {

  .el-input,
  .el-select,
  .el-cascader,
  .el-textarea {
    width: 220px;
  }
}
</style>
<style lang="scss" scoped>
.el-drawer {
  overflow: auto;

  .el-form-item__kc /deep/ {
    margin-bottom: 0;

    .el-form-item__content {
      display: flex;
      justify-content: flex-start;

      .el-form-item__sn {
        padding-left: 12px;
        margin-bottom: 0;

        .el-form-item {
          margin: 0 10px;
        }

        .el-input {
          width: 90px;
        }

        .el-input-group__append,
        .el-input-group__prepend {
          padding: 0 8px;
        }

        .el-form-item__label {
          padding-right: 0;
        }
      }
    }
  }
}

.demo-ruleForm {
  padding-left: 2%;
}

.shop-edit {

  .el-input,
  .el-select,
  .el-cascader,
  .el-textarea {
    width: 220px;
  }

  .demo-drawer__footer {
    padding: 0px 20px 20px;
  }
}
</style>